<template>
	<view style="position: relative">
		<view style="padding: 10px;display: flex;" class="box">
			<view style="font-size: 18px;font-weight: bold;flex: 5;">
				全部药物({{medicinesData.length}})
			</view>
			<button type="warn" size="mini" style="flex: 1;" @click="batchRemove">批量移除</button>
		</view>
		<view style="height: 1000px;">
			<view class="box" v-for="item in medicinesData" style="margin-top: 10px;">
				<view style="display: flex;">
					<view style="flex: 1;">
						<checkbox-group>
							<label>
								<checkbox :checked="item.checked" @click="checkboxChange(item)" color="#FF8040" />
							</label>
						</checkbox-group>
					</view>
					<view style="flex: 10; font-size: 18px;font-weight: bold;"
						@click="goBusinessDetail(item.businessId)">{{item.businessName}} ></view>
				</view>
				<view style="margin-top: 10px;" @click="goMedicinesDetail(item.medicinesId)">
					<view style="display: flex;">
						<image :src="item.medicinesPhoto" style="width: 160rpx;margin-top: 6px;" mode="widthFix">
						</image>
						<view>
							<view style="display: flex;">
								<view>
									<view
										style="font-size: 18px; font-weight: bold; width: 190px;margin-left: 10px;margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
										{{item.medicinesName}}
									</view>
									<view
										style="font-size: 14px; font-weight: bold;margin-left: 10px;color: gray;margin-top:8px;">
										样式规格:{{item.styleDescribe}}
									</view>
								</view>
								<view style="margin-top: 5px;margin-left: 20px;">
									<view style="font-size: 15px;font-weight: bold;">￥{{item.price*item.num}}</view>
									<view style="font-size: 15px;font-weight: bold;display: flex;">
										<image src="../../static/icons/叉.png" style="width: 20rpx;margin-top: 5px;"
											mode="widthFix">
										</image>
										<view style="margin-left: 2px;">{{item.num}}</view>
									</view>
								</view>
							</view>
							<view style="display: flex;font-size: 12px;margin-left: 5px;margin-top: 3px;">
								<view
									style="margin-top: 10rpx;margin-left: 2px;border: 1px solid orange;color: orange;padding: 2px;">
									假一赔四
								</view>
								<view
									style="margin-top: 10rpx;margin-left: 2px;border: 1px solid orange;color: orange;padding: 2px;">
									退货宝
								</view>
								<view
									style="margin-top: 10rpx;margin-left: 2px; border: 1px solid orange;color: orange;padding: 2px;">
									极速退款
								</view>
								<view
									style="margin-top: 10rpx;margin-left: 2px;border: 1px solid orange;color: orange;padding: 2px;">
									七天无理由退货
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="box"
			style="display: flex; align-items: center;height: 50px;position: fixed;bottom: 0;width: 100%;">
			<checkbox-group>
				<view style="display: flex;padding: 10px;">
					<view style="display: flex;margin-top: 5px;">
						<checkbox :checked="allChecked" @click="toggleAllCheckboxes" color="#FF8040" />
						<view style="font-size: 16px;font-weight: bold;">全选</view>
						<view style="margin-left: 10px;margin-top: 2px;">已选{{num}}件，合计</view>
						<view style="color: red;font-size: 17px;font-weight: bold;">￥{{this.totalPrice}}</view>
					</view>
					<button size="mini" style="background-color: #ff533c;margin-left: 60px;color: white;"
						@click="pay()">结算</button>
				</view>
			</checkbox-group>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				medicinesData: '',
				allChecked: false, // 全选状态
				totalPrice: 0,
				addressId: '',
				num: 0,
			}
		},
		onShow() {
			this.loadGoods()
			this.loadDefutAddress()
		},
		methods: {
			loadDefutAddress() {
				this.$request.get('/address/selectDefaut').then(res => {
					if (res.code === '200') {
						// 按销量从高到低排序
						this.defutAddress = res.data;
						this.addressId = res.data.id;
					} else {
						this.$message.error(res.msg);
					}
				});
			},
			pay() {
				let selectedMedicines = this.medicinesData.filter(item => item.checked);
				if (selectedMedicines.length === 0) {
					uni.showToast({
						icon: 'none',
						title: '请选择商品'
					});
					return;
				}
				let data = {
					addressId: this.addressId,
					status: '待发货',
					totalPrice: this.totalPrice,
					cartData: selectedMedicines
				}
				this.$request.post('/order/add', data).then(res => {
					if (res.code === '200') {
						uni.showToast({
							icon: 'success',
							title: '下单成功'
						});
						this.loadGoods()
					} else {
						this.$message.error(res.msg)
					}
				})
			},
			goBusinessDetail(businessId) {
				uni.navigateTo({
					url: '/pages/businessDetail/businessDetail?businessId=' + businessId
				})
			},
			loadGoods() {
				this.$request.get('/cart/selectAll').then(res => {
					if (res.code === '200') {
						this.medicinesData = res.data
					} else {
						this.$message.error(res.msg)
					}
				})
			},
			goMedicinesDetail(medicinesId) {
				uni.navigateTo({
					url: '/pages/medicinesDetail/medicinesDetail?medicinesId=' + medicinesId
				})
			},
			checkboxChange(item) {
				// 切换商品的选中状态
				item.checked = !item.checked; // 假设每次点击都会切换选中状态
				// 重置总价格和商品数量
				this.totalPrice = 0;
				this.num = 0;

				// 遍历所有商品来计算总价格和商品数量
				this.medicinesData.forEach(medicine => {
					if (medicine.checked) {
						this.totalPrice += medicine.price * medicine.num;
						this.num += medicine.num;
					}
				});
				this.updateAllChecked();
			},
			toggleAllCheckboxes() {
				this.allChecked = !this.allChecked;
				this.totalPrice = 0;
				this.num = 0;
				// 遍历所有商品来计算总价格和商品数量
				this.medicinesData.forEach(medicine => {
					medicine.checked = this.allChecked;
					if (medicine.checked) {
						this.totalPrice += medicine.price * medicine.num;
						this.num += medicine.num;
					}
				});
			},
			updateAllChecked() {
				this.allChecked = this.medicinesData.every(item => item.checked);
			},
		}
	}
</script>

<style>

</style>